<template>
  <div class="class-dialog-select">
    <div class="overlay"></div>
    <div class="dialog-wrapper">
      <div
        v-if="isShowCloseBtn"
        class="dialog-close flex-center"
        @click="closeDialog"
      >
        <zl-icon
          icon="icon-guanbi"
          :icon-style="{ width: '24px', color: '#bbb' }"
        ></zl-icon>
      </div>
      <div class="dialog-content flex-column-wrap" v-if="!isPackCourse">
        <div class="guide mb20">
          <span class="cur-subtext">当前：</span>
          <span class="cur-course">{{ courseInfo.course_name }}</span>
        </div>
        <el-tabs
          v-if="!isScCourse"
          v-model="selectClass.year"
          class="mb15"
          @tab-click="hanleSelectYear"
        >
          <el-tab-pane
            v-for="(value, key) in yearTeacherMap"
            :label="key"
            :name="key"
            :key="key"
          ></el-tab-pane>
        </el-tabs>
        <div class="flex-column-wrap flex1">
          <div class="dialog-content-r flex1 flex-column-wrap">
            <div v-if="teacherList.length">
              <div class="mb30 flex1">
                <ul class="teacher-list mb20">
                  <li
                    @click="chooseTeacher(item, index)"
                    v-for="(item, index) in teacherList"
                    :key="item.teacher_id"
                    class="teacher-item mr20"
                    :class="{
                      'teacher-item-active':
                        selectClass.teacher_id === item.teacher_id
                    }"
                  >
                    <div class="teacher-item-name text-ess-1 flex-center">
                      {{ item.teacher_name }}
                    </div>
                  </li>
                </ul>
                <div
                  class="teacher-info"
                  v-if="
                    selectInfo.teacher && Object.keys(selectInfo.teacher).length
                  "
                >
                  <div class="teacher-top flex-center-wrap">
                    <img
                      class="teacher-headimg"
                      :src="parseResourceUrl(selectInfo.teacher.teacher_avatar)"
                      alt=""
                    />
                    <div class="ml10">
                      <div class="teacher-name">
                        {{ selectInfo.teacher.teacher_name }}
                      </div>
                      <div class="teacher-major">
                        授课专业:{{ selectInfo.teacher.teacher_title }}
                      </div>
                    </div>
                  </div>
                  <!-- <div class="teacher-feature">授课特点:{{ selectInfo.teacher.teacher_title }}</div> -->
                  <div class="teacher-des">
                    简介:{{ selectInfo.teacher.teacher_desc }}
                  </div>
                </div>
              </div>
              <div class="flex-center">
                <el-button
                  class="class-btn mr20"
                  type="primary"
                  @click="confirmCourse"
                  round
                >
                  确定
                </el-button>
                <el-button
                  v-if="isShowCloseBtn"
                  class="class-btn cancle-btn"
                  @click="closeDialog"
                  round
                >
                  取消
                </el-button>
              </div>
            </div>
            <div
              class="c9 blank-box"
              v-if="selectClass.year > 0 && !teacherList.length"
            >
              <img
                class="blank-img"
                src="//image.zlketang.com/public/news/images/new_official/play/empty_white.png"
                alt=""
                srcset=""
              />
              <div>暂无老师安排哦</div>
            </div>
          </div>
        </div>
      </div>
      <div class="dialog-content" v-else>
        <div class="guide mb20">
          <span class="cur-subtext">当前：</span>
          <span class="cur-subtext">{{ selectClass.class_name }}&nbsp;></span>
          <span class="cur-course">{{ selectClass.course_name }}</span>
        </div>
        <el-tabs
          v-if="!isScCourse"
          v-model="selectClass.year"
          class="mb15 mt20"
          @tab-click="hanleSelectYear"
        >
          <el-tab-pane
            v-for="(item, key) in coursePackInfo"
            :label="key"
            :name="key"
            :key="key"
          ></el-tab-pane>
        </el-tabs>
        <div class="flex-wrap">
          <div class="dialog-content-l" v-if="isPackCourse">
            <div class="class-box">
              <ul v-if="coursePackInfo && coursePackInfo[selectClass.year]">
                <li
                  @click="chooseClass(index)"
                  v-for="(item, index) in coursePackInfo[selectClass.year]
                    .chapters"
                  :key="item.id"
                  class="class-item"
                >
                  <div
                    class="class-item-name flex-center-wrap flex-justify-between"
                    :class="{
                      'class-item-name-active': selectClass.classIndex === index
                    }"
                  >
                    <div>{{ item.dir_name }}</div>
                    <zl-icon
                      class="dir-more-icon"
                      :class="{
                        'dir-more-icon-zk': selectClass.classIndex === index
                      }"
                      icon="icon-xiala1"
                      :icon-style="{ width: '20px', height: '20px' }"
                    ></zl-icon>
                  </div>
                  <ul
                    class="class-item-cont"
                    v-if="selectClass.classIndex === index"
                  >
                    <li
                      @click.stop="chooseCourse(citem, cindex)"
                      v-for="(citem, cindex) in item.courses"
                      :key="citem.id"
                      class="class-item-per flex-center-wrap"
                      :class="{
                        'class-item-per-active':
                          selectClass.course_id === citem.course_id
                      }"
                    >
                      {{ citem.course_name }}
                    </li>
                  </ul>
                </li>
              </ul>
            </div>
          </div>
          <div class="dialog-content-r flex-wrap flex-column-wrap">
            <div v-if="teacherList.length">
              <div class="mb30 flex1">
                <ul class="teacher-list mb20">
                  <li
                    @click="chooseTeacher(item, index)"
                    v-for="(item, index) in teacherList"
                    :key="item.teacher_id"
                    class="teacher-item mr20"
                    :class="{
                      'teacher-item-active':
                        selectClass.teacher_id === item.teacher_id
                    }"
                  >
                    <div class="teacher-item-name text-ess-1 flex-center">
                      {{ item.teacher_name }}
                    </div>
                  </li>
                </ul>
                <div
                  class="teacher-info"
                  v-if="
                    selectInfo.teacher && Object.keys(selectInfo.teacher).length
                  "
                >
                  <div class="teacher-top flex-center-wrap">
                    <img
                      class="teacher-headimg"
                      :src="parseResourceUrl(selectInfo.teacher.teacher_avatar)"
                      alt=""
                    />
                    <div class="ml10">
                      <div class="teacher-name">
                        {{ selectInfo.teacher.teacher_name }}
                      </div>
                      <div class="teacher-major">
                        授课专业:{{ selectInfo.teacher.teacher_title }}
                      </div>
                    </div>
                  </div>
                  <!-- <div class="teacher-feature">授课特点:{{selectInfo.teacher.teacher_title}}</div> -->
                  <div class="teacher-des">
                    简介:{{ selectInfo.teacher.teacher_desc }}
                  </div>
                </div>
              </div>
              <div
                style="margin-left:44px"
                :style="{
                  marginLeft: isShowCloseBtn ? '44px' : '100px'
                }"
              >
                <el-button
                  class="class-btn mr20"
                  type="primary"
                  @click="confirmCourse"
                  round
                >
                  确定
                </el-button>
                <el-button
                  v-if="isShowCloseBtn"
                  class="class-btn cancle-btn"
                  @click="closeDialog"
                  round
                >
                  取消
                </el-button>
              </div>
            </div>
            <div
              class="c9 flex-center blank-box"
              v-if="
                coursePackInfo &&
                  coursePackInfo[selectClass.year] &&
                  !teacherList.length
              "
            >
              <div class="">
                <img
                  class="blank-img"
                  src="//image.zlketang.com/public/news/images/new_official/play/empty_white.png"
                  alt=""
                  srcset=""
                />
                <div>暂无老师安排哦</div>
              </div>
            </div>
          </div>
        </div>
      </div>
    </div>
  </div>
</template>
<script>
import zlIcon from '@/components/zlIcon.vue'
import { getSoft, getOneCourse, getFreeOneCourse } from '@/api/play'
export default {
  components: {
    'zl-icon': zlIcon
  },
  data() {
    return {
      // 是否有年份 标记当前课程包是否存在年份选项：1-存在 0-不存在年份 (不存在年份时，muster_map值结构与当前不一致，为chapters的值)
      isHaveYear: false,
      // 老师列表
      teacherList: [],
      // 选中的年份、班级index、课程id、权限名称、班级名称
      selectClass: {
        year: '0',
        classIndex: '',
        course_id: '',
        course_name: '', //课程名称
        class_name: '', //班级名称
        teacher_id: ''
      },
      zlaBtn: {
        key_name: '',
        key_content: ''
      }
    }
  },
  computed: {
    // 单权限详情
    courseInfo() {
      return this.$store.state.play.courseInfo || {}
    },
    // 权限集
    coursePackInfo() {
      return this.$store.state.play.coursePackInfo || {}
    },
    // 是否为权限集
    isPackCourse() {
      return this.$store.state.play.isPackCourse
    },
    // 当前选中状态
    selectInfo() {
      return this.$store.state.play.selectInfo
    },
    // 单权限下的年份老师映射表
    yearTeacherMap() {
      return this.courseInfo.yearTeacherMap || {}
    },
    // 是否为实操权限集
    isScCourse() {
      return this.$store.state.play.isScCourse
    },
    // 是否展示关闭按钮
    isShowCloseBtn() {
      return (
        this.$store.state.play.courseMkInfo &&
        Object.keys(this.$store.state.play.courseMkInfo).length
      )
    },
    // 判断是否登录
    isLogin() {
      return this.$store.state.user.isLogin
    },
    key_content() {
      let currentYear = new Date().getFullYear()
      let teacher = this.courseInfo.teachers.filter(
        item => item.teacher_id === this.selectInfo.teacher_id
      )
      teacher = teacher.length ? teacher[0] : {}
      return `${this.courseInfo.course_name}_${teacher.teacher_name}_${this
        .selectInfo.year || currentYear}`
    }
  },
  methods: {
    // 关闭弹窗
    closeDialog() {
      let el = document.querySelector('.class-dialog-select')
      let controlBox = document.querySelector('.play-page')
      controlBox.appendChild(el)
      this.$store.dispatch('play/toggleChooseClassDialog', false)
    },
    // 确定选择的课程
    confirmCourse() {
      this.getCourseInfo()
    },
    // 判断权限
    checkPower({ is_purchased, is_free, product_id }) {
      // 如果免费但是没激活，试看5分钟，
      this.$store.commit('play/setShowVideoStatus', '')
      if (+is_purchased === 0 && +is_free === 1 && this.isLogin) {
        // 登陆情况下 没激活，展示 点击激活课程
        this.$store.commit('play/setShowVideoStatus', 'activeCourse')
      }
      if (+is_free === 1 && !this.isLogin) {
        // 登陆情况下 没激活，展示 试看5分钟
        this.$store.commit('play/setShowVideoStatus', 'trySee')
      }
      if (+is_purchased === 0 && +is_free === 0) {
        if (!this.isLogin) {
          return this.showLoginDialog()
        }
        // 不免费没激活，提示无权观看
        this.$confirm('抱歉，您暂未开通课程权限。', '提示', {
          confirmButtonText: '去开通',
          cancelButtonText: '返回',
          type: 'warning',
          center: true,
          customClass: 'custom-confirm-box'
        })
          .then(res => {
            if (!product_id) {
              return this.$message({
                type: 'warning',
                message: '该课程暂未绑定商品，请联系客服！'
              })
            }
            this.goTo('/course_detail.html', { query: { product_id } })
          })
          .catch(err => {
            if (window.history.length === 1) {
              this.goTo('/personal/index.html?name=1', { replace: true })
            } else {
              // 清除notfound页历史记录
              history.back()
            }
          })
        return false
      }
      return true
    },
    // 获取课程目录
    async getCourseInfo() {
      // isFreePlay 是否为免费看课页面
      let isFreePlay = location.href.includes('free_course_play.html')
      let { course_id, year, teacher_id } = this.selectClass
      if (!year) {
        this.$message({ type: 'warning', message: '请选择年份' })
        return
      }
      if (!course_id) {
        this.$message({ type: 'warning', message: '请选择课程' })
        return
      }
      if (!teacher_id) {
        this.$message({ type: 'warning', message: '请选择老师' })
        return
      }
      let params = {
        course_id: course_id,
        year: year,
        teacher_id: teacher_id
      }
      // 获取详细信息
      try {
        let res = {}
        if (isFreePlay) {
          // 免费看课
          res = await getFreeOneCourse({ course_id: course_id })
        } else {
          res = await getOneCourse({ course_id: course_id })
        }
        if (res.errcode !== 0) {
          this.$message({ type: 'warning', message: res.errmsg })
          return
        }
        // 判断是否有权观看
        let {
          is_purchased,
          is_free,
          industry_is_practice,
          is_bind_shicao,
          product_id,
          dir_class,
          teachers
        } = res.data
        if (!this.checkPower({ is_purchased, is_free, product_id })) return
        let yearTeacherMap = dir_class.reduce((obj, item) => {
          // 为年份赋初值
          let teacher = teachers.filter(
            tea => tea.teacher_id === item.teacher_id
          )[0]
          if (obj[item.year]) {
            //存在此年份属性
            obj[item.year].push(teacher)
          } else {
            obj[item.year] = []
            obj[item.year].push(teacher)
          }
          return obj
        }, {})
        this.$store.commit('play/setSoftInfo', {})
        if (+industry_is_practice === 1) {
          //实操课程
          this.$store.commit('play/setIsScCourse', true)
          if (is_bind_shicao) {
            //绑定了实操的操作, 计算软件清算日期数暂时没有这个逻辑
            getSoft({ product_id })
              .then(result => {
                if (+result.errcode === 0) {
                  this.$store.commit('play/setSoftInfo', result.data)
                }
              })
              .catch(err => {
                this.$message({
                  type: 'warning',
                  message: '网络错误，请重试！'
                })
              })
          }
        }
        let data = { ...res.data, yearTeacherMap }
        await this.$store.dispatch('play/getCourseInfo', data)
      } catch (e) {}
      await this.$store.dispatch('play/getCourseMkInfo', params)
      this.zlaBtn = {
        key_name: '班次切换_确定',
        key_content: this.key_content
      }
      this.closeDialog()
    },

    // 选择年份
    hanleSelectYear() {
      if (!this.isPackCourse) {
        let { id: course_id, course_name } = this.courseInfo
        this.chooseCourse({ course_id, course_name })
      } else {
        this.chooseClass(0, true)
      }
    },
    // 选择班级 当切换年份是需要传true
    chooseClass(index, type) {
      if (this.selectClass.classIndex === index && !type) {
        this.selectClass.classIndex = ''
        return
      }
      this.selectClass.classIndex = index
      let { year, classIndex } = this.selectClass
      let { chapters } = this.coursePackInfo[year]
      if (!chapters || !chapters.length) {
        this.$message({
          type: 'warning',
          message: '当前年份下，没有配置课程，请咨询客服'
        })
        return
      }
      this.selectClass.class_name = chapters[classIndex].dir_name
      let { course_id, course_name } = chapters[classIndex].courses[0]
      this.chooseCourse({ course_id, course_name })
    },
    // 选择课程
    chooseCourse(item) {
      this.selectClass.course_id = item.course_id
      this.selectClass.course_name = item.course_name
      let isHasTeacher = this.getTeachers()
      if (!isHasTeacher) return
      try {
        this.selectClass.teacher_id = this.teacherList[0].teacher_id
        if (!this.isPackCourse) {
          this.selectClass.teacher_id = this.teacherList[0].teacher_id
        } else {
          this.selectClass.teacher_id = this.teacherList[0].teacher_id
        }
      } catch (err) {
        this.selectClass.teacher_id = ''
      }
      this.chooseTeacher({ teacher_id: this.selectClass.teacher_id })
    },
    // 选择老师
    chooseTeacher(item) {
      this.selectClass.teacher_id = item.teacher_id
      this.handleTeacherSelect()
    },
    // 当前选中的信息对应可以选择的老师
    getTeachers() {
      let { year, classIndex, course_id } = this.selectClass
      if (!this.isPackCourse) {
        this.teacherList = this.yearTeacherMap[year]
      } else {
        let { chapters, allTeachers } = this.coursePackInfo[year]
        let item = chapters[classIndex].courses.filter(
          c_item => c_item.course_id === course_id
        )[0]
        let teachers = (Array.isArray(item.teachers) && item.teachers) || []
        // 强制转为字符串
        teachers = teachers.map(tid => tid + '')
        // teacherList：当前老师列表
        let teacherList = Object.values(allTeachers).filter(c_item => {
          return teachers.includes(c_item.teacher_id)
        })
        let bindTeacherIndexArr = item.bind_teachers_index
        // 强制转为字符串
        bindTeacherIndexArr =
          (Array.isArray(bindTeacherIndexArr) &&
            bindTeacherIndexArr.map(bindIndexId => bindIndexId + '')) ||
          []
        if (bindTeacherIndexArr.length) {
          // teacherOrdersArr：老师排序数组
          let teacherOrdersArr = []
          // [1] 先按bind_teachers_index进行排序（bind_teachers_index中的id需要包含在teachers里面）
          bindTeacherIndexArr.forEach(tItem => {
            // 校验tItem合法性，必须为数字字符串
            if (/^\d+$/.test(tItem) && teachers.includes(tItem)) {
              teacherOrdersArr.push(tItem)
            }
          })
          // [2] 在将teachers中不包含在bindTeacherIndexArr中的元素加入
          teachers.forEach(tId => {
            // 校验tId合法性，必须为数字字符串
            if (/^\d+$/.test(tId) && !teacherOrdersArr.includes(tId)) {
              teacherOrdersArr.push(tId)
            }
          })
          // sortedTeacherList：排序后的数组
          let sortedTeacherList = []
          teacherOrdersArr.forEach(element => {
            let currentTeacher = teacherList.find(
              c_item => +c_item.teacher_id === +element
            )
            currentTeacher && sortedTeacherList.push(currentTeacher)
          })
          this.teacherList = sortedTeacherList
        } else {
          this.teacherList = teacherList
        }

        if (!this.teacherList.length) {
          this.$store.dispatch('play/setSelectInfo', {
            ...this.selectInfo,
            teacher: {},
            teacherList: []
          })
          // this.$message({
          //   type: 'warning',
          //   message: '没有可以选择的老师，请联系客服！'
          // })
          return false
        }
      }
      return true
    },
    //当切换年份、班级、老师时，获取老师信息
    handleTeacherSelect() {
      let select = {}
      select.teacherList = this.teacherList
      if (this.teacherList && this.teacherList.length) {
        select.teacher = this.teacherList.filter(
          item => item.teacher_id === this.selectClass.teacher_id
        )[0]
      } else {
        select.teacher = {}
      }
      this.$store.dispatch('play/setSelectInfo', {
        ...this.selectInfo,
        ...select
      })
    },

    // 初始化数据
    initData() {
      // 如果有缓存 则使用缓存，没有则会默认选中第一个值
      // 1.如果是权限集，默认选中第一个年份的第一个权限的第一个老师
      // 2.如果是单权限集，默认选中第一个年份，第一个老师
      if (this.selectInfo.year) {
        //存在选中的值，回显
        let { year, course_id, teacher_id } = this.selectInfo
        this.selectClass.year = year
        this.selectClass.teacher_id = teacher_id
        this.selectClass.course_id = course_id
        let { course_name } = this.findYearAndClassIndex(course_id)
        this.selectClass.course_name = course_name
        if (this.isPackCourse) {
          this.getClassId(this.selectClass.course_id, this.selectClass.year)
        }
      } else {
        if (!this.isPackCourse) {
          //单权限的情况
          this.selectClass.year = Object.keys(this.yearTeacherMap)[0]
          this.selectClass.course_id = this.courseInfo.id
        } else {
          //多权限的情况
          if (this.selectInfo.course_id) {
            //存在选中的课程，获取对应的年份、班级index
            let { year, classIndex, course_name } = this.findYearAndClassIndex(
              this.selectInfo.course_id
            )
            if (!year) {
              //说明传参不合法，取默认值
              this.selectClass.year = Object.keys(this.coursePackInfo)[0]
              let { chapters } = this.coursePackInfo[this.selectClass.year]
              this.selectClass.classIndex = 0
              this.selectClass.course_id =
                chapters[this.selectClass.classIndex].courses[0].course_id
              this.selectClass.course_name =
                chapters[this.selectClass.classIndex].courses[0].course_name
            } else {
              this.selectClass.year = year
              this.selectClass.classIndex = classIndex
              this.selectClass.course_id = this.selectInfo.course_id
              this.selectClass.course_name = course_name
            }
          } else {
            this.selectClass.year = Object.keys(this.coursePackInfo)[0]
            this.selectClass.classIndex = 0
          }
          let { year, classIndex } = this.selectClass
          let { chapters } = this.coursePackInfo[year]
          this.selectClass.class_name = chapters[classIndex].dir_name
        }
      }
      this.setCurrentLocation()
      let isHasTeacher = this.getTeachers()
      if (!isHasTeacher) return
      this.selectClass.teacher_id = this.selectClass.teacher_id
        ? this.selectClass.teacher_id
        : this.teacherList[0].teacher_id
      this.handleTeacherSelect()
    },
    // 获取对应课程的年份和班级index
    findYearAndClassIndex(course_id) {
      let obj = {}
      if (this.isPackCourse) {
        Object.entries(this.coursePackInfo).some(([year, value]) => {
          value.chapters.some((classItem, classIndex) => {
            let findCourse = classItem.courses.some(courseItem => {
              if (+courseItem.course_id === +course_id) {
                obj.course_name = courseItem.course_name
                return true
              }
            })
            if (findCourse) {
              obj.classIndex = classIndex
              obj.year = year
              return true
            }
          })
        })
      } else {
        obj.course_name = this.courseInfo.course_name
      }
      return obj
    },
    // 获取课程对应的班级id、名称
    getClassId(course_id, year) {
      let { chapters } = this.coursePackInfo[year]
      chapters.find((item, index) => {
        if (item.courses.some(course => course.course_id === course_id)) {
          this.selectClass.class_name = item.dir_name
          this.selectClass.classIndex = index
          return true
        }
      })
    },
    setCurrentLocation() {
      this.$nextTick(() => {
        let activeItemDom = document.querySelector('.class-item-per-active')
        let boxDom = document.querySelector('.class-box')
        if (!boxDom) return
        let itemToBBoxDis = boxDom.offsetHeight / 2
        if (activeItemDom.offsetTop > itemToBBoxDis) {
          boxDom.scrollTop = activeItemDom.offsetTop - itemToBBoxDis
        }
      })
    },
    // 之了数据点击
    sendZlaClick() {
      this.keyClick({
        ...this.zlaBtn
      })
    }
  },
  mounted() {},
  watch: {
    zlaBtn: {
      handler() {
        this.sendZlaClick()
      },
      deep: true
    }
  }
}
</script>
<style scoped>
.class-dialog-select {
  position: absolute;
  left: 0;
  top: 0;
  right: 0;
  bottom: 0;
  z-index: 3000;
}
.overlay {
  position: absolute;
  z-index: 8;
  left: 0;
  top: 0;
  right: 0;
  bottom: 0;
  background: rgba(0, 0, 0, 0.6);
}
.dialog-wrapper {
  position: absolute;
  z-index: 9;
  left: 50%;
  top: 50%;
  -webkit-transform: translate(-50%, -50%);
  transform: translate(-50%, -50%);
  border-radius: 12px;
  background: #fff;
}
.dialog-content {
  padding: 20px;
  /* height: 492px; */
}
.dialog-content-l {
  width: 232px;
  margin-right: 30px;
}
.dialog-content-r {
  width: 578px;
}
.part-title {
  /* css-ignore */
  margin-bottom: 20px;
  font-size: 16px;
  color: #e6e6e6;
  font-weight: bold;
}
.teacher-list {
  display: inline-block;
}
.teacher-item {
  display: inline-block;
  text-align: center;
  margin-right: 20px;
  margin-bottom: 10px;
  min-width: 70px;
  padding: 0 10px;
  line-height: 36px;
  color: #262626;
  background-color: #f5f5f5;
  border: 1px solid #f5f5f5;
  border-radius: 3px;
  font-size: 14px;
  font-weight: normal;
  cursor: pointer;
}
.teacher-item-active {
  border: 1px solid #b3cfff;
  color: #3480ff;
  background: #f5f9ff;
}
.teacher-item:hover {
  border: 1px solid #b3cfff;
  color: #3480ff;
  background: #f5f9ff;
}
.teacher-item-name {
  height: inherit;
}
.class-item-name {
  padding: 0 20px;
  height: 50px;
  font-size: 16px;
  color: #383838;
  border-radius: 8px;
  cursor: pointer;
}
.class-item-name-active {
  /* css-ignore */
  background: #f5f5f5;
  border-radius: 8px;
  color: #383838;
}
.class-item-cont {
  padding: 14px 30px;
}

.class-item-per {
  padding-bottom: 18px;
  font-size: 14px;
  color: #666666;
  cursor: pointer;
}
.class-item-per:hover {
  color: #383838;
}

.class-item-per-active {
  color: #3480ff !important;
}
.class-item-per:last-of-type {
  padding-bottom: 0;
}
.teacher-info {
  height: 205px;
  margin-bottom: 30px;
  padding: 15px 20px 20px;
  background-color: #f5f5f5;
  border-radius: 8px;
}
.teacher-headimg {
  width: 60px;
  height: 60px;
  border-radius: 50%;
}
.teacher-name {
  margin-bottom: 12px;
  font-size: 14px;
  font-weight: bold;
  color: #383838;
}
.teacher-major {
  font-size: 12px;
  color: #383838;
}
.teacher-top {
  margin-bottom: 20px;
}
.teacher-feature {
  margin-bottom: 10px;
  color: #666666;
  font-size: 14px;
}
.teacher-des {
  font-size: 14px;
  font-weight: 400;
  color: #666666;
  line-height: 22px;
  height: 96px;
  overflow: auto;
}
.class-btn {
  width: 106px;
  height: 36px;
  padding: 0;
  border: 1px solid #dcdfe6;
  color: #606266;
}
.cancle-btn:hover {
  background-color: #fff;
  border: 1px solid #dcdfe6;
  color: #606266;
}
.dialog-close {
  position: absolute;
  z-index: 9;
  right: 20px;
  top: 20px;
  width: 40px;
  height: 40px;
  cursor: pointer;
}
.dialog-close-icon {
  /* css-ignore */
  font-size: 24px;
  color: #999999;
}
.dialog-close-icon:hover {
  color: #666666;
}
.cur-subtext {
  font-size: 16px;
  color: #666666;
}
.cur-course {
  font-size: 16px;
  color: #383838;
}
.translate-right-icon {
  /* css-ignore */
  transition: all 0.3s ease;
}
.class-item-name-active .translate-right-icon {
  /* css-ignore */
  transform: rotate(90deg);
}
.class-box {
  height: 337px;
  overflow: auto;
}
/* .class-item-name-active .class-item-cont {
  min-height: 200px;
} */
.dir-more-icon {
  color: #8c8c8c;
  transform: rotate(-90deg);
  transition: all 0.3s ease;
}
.dir-more-icon-zk {
  color: #383838;
  transform: rotate(0deg);
}
.blank-box {
  padding: 64px 0;
  text-align: center;
}
.blank-img {
  margin-bottom: 12px;
  width: 196px;
  height: auto;
}
.mb20 {
  margin-bottom: 20px;
}
.class-dialog-select /deep/ .el-tabs__nav-wrap::after {
  height: 1px;
  background: #f0f1f2;
}
.class-dialog-select /deep/ .el-tabs__item {
  font-size: 16px;
  color: #666666;
}
.class-dialog-select /deep/ .el-tabs__item:hover {
  color: #383838;
}
.class-dialog-select /deep/ .el-tabs__item.is-active {
  color: #383838;
  font-size: 18px;
  font-weight: bold;
}
.class-dialog-select /deep/ .el-button + .el-button {
  margin: 0;
}
.class-dialog-select /deep/ ::-webkit-scrollbar-thumb {
  /* background-color: #e6e6e6; */
}
.class-dialog-select /deep/ .el-button--primary {
  color: #fff;
  background-color: #3480ff;
  border-color: #3480ff;
}
</style>
